<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-06-14 13:43:09
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-07-03 10:06:39
 * @FilePath: \nms-vue\src\views\networkStatus\modules\telemetry.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="8">
            <a-form-item label="识别码"><a-input v-model="queryParam.code" /> </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="开始时间"
              ><a-date-picker @change="onChange" v-model="queryParam.startTime" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="结束时间"
              ><a-date-picker @change="onChange" v-model="queryParam.endTime" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <h2 class="Time">{{ data[0].time }}</h2>
    <a-table :columns="columns" :data-source="data" bordered size="middle" />
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 80,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    },
  },
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'time' },
  },
  {
    title: '导弹识别码',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '导弹经度(°)',
    dataIndex: 'lng',
    key: 'lng',
  },
  {
    title: '导弹纬度(°)',
    dataIndex: 'lat',
    key: 'lat',
  },
  {
    title: '导弹高度(m)',
    key: 'hei',
    dataIndex: 'hei',
    scopedSlots: { customRender: 'hei' },
  },
  {
    title: 'Vx(m/s)',
    dataIndex: 'Vx',
    key: 'Vx',
  },
  {
    title: 'Vy(m/s)',
    dataIndex: 'Vy',
    key: 'Vy',
  },
  {
    title: 'Vz(m/s)',
    dataIndex: 'Vz',
    key: 'Vz',
  },
]

const data = [
  {
    key: '1',
    time: '2023-04-15 15:23:56',
    lng: 102,
    lat: 32,
    hei: 1251,
    Vy: '2',
    Vx: '3',
    Vz: '4',
    code: '1001',
  },
  {
    key: '2',
    time: '2023-04-15 15:23:56',
    lng: 102,
    lat: 32,
    hei: 1051,
    Vy: '23',
    Vx: '31',
    Vz: '34',
    code: '1002',
  },
  {
    key: '3',
    time: '2023-04-15 15:23:56',
    lng: 112,
    lat: 36,
    hei: 1251,
    Vy: '24',
    Vx: '36',
    Vz: '48',
    code: '1003',
  },
  {
    key: '4',
    time: '2023-04-15 15:23:56',
    lng: 102,
    lat: 32,
    hei: 1051,
    Vy: '23',
    Vx: '31',
    Vz: '34',
    code: '1004',
  },
  {
    key: '5',
    time: '2023-04-15 15:23:56',
    lng: 112,
    lat: 36,
    hei: 1251,
    Vy: '24',
    Vx: '36',
    Vz: '48',
    code: '1005',
  },
  {
    key: '6',
    time: '2023-04-15 15:23:56',
    lng: 102,
    lat: 32,
    hei: 1051,
    Vy: '23',
    Vx: '31',
    Vz: '34',
    code: '1006',
  },
  {
    key: '7',
    time: '2023-04-15 15:23:56',
    lng: 112,
    lat: 36,
    hei: 1251,
    Vy: '24',
    Vx: '36',
    Vz: '48',
    code: '1007',
  },
]

export default {
  data() {
    return {
      queryParam: {},
      data,
      columns,
      isorter: {
        order: 'asc',
        column: 'creat_time',
      },
    }
  },
}
</script>

<style lang="less" scoped>
.Time {
  color: rgb(74, 208, 248);
}
</style>
